<!DOCTYPE html>
<html>
<head>
    <title>Elliptical Orbit Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="550" height="400"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Parameters for drawing
    const cx = 275;
    const cy = 200;
    const a = 200; // Semi-major axis in pixels
    const b = a / 2; // Semi-minor axis (since e=sqrt(3)/2, b=a/2)
    const e = Math.sqrt(3) / 2;
    const c = a * e; // Focal distance
    const pointRadius = 3.5;
    const headlen = 8; // Arrow head length

    // General Style
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // 1. Draw Axes
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(cx - a - 40, cy);
    ctx.lineTo(cx + a + 40, cy); // Major axis
    ctx.moveTo(cx, cy - b - 40);
    ctx.lineTo(cx, cy + b + 40); // Minor axis
    ctx.stroke();

    // 2. Draw Ellipse
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.ellipse(cx, cy, a, b, 0, 0, 2 * Math.PI);
    ctx.stroke();

    // 3. Define and Draw Points
    const Dx = cx - a, Dy = cy;
    const Fx = cx + a, Fy = cy;
    const Ex = cx, Ey = cy - b;
    const Gx = cx, Gy = cy + b;
    const earthX = cx + c;
    
    // Using a math angle (0 at +x, counter-clockwise) and then adjusting for canvas y-coord (y=0 at top)
    const p_angle_rad = 140 * Math.PI / 180;
    const Px = cx + a * Math.cos(p_angle_rad);
    const Py = cy - b * Math.sin(p_angle_rad);

    function drawPoint(x, y) {
        ctx.beginPath();
        ctx.arc(x, y, pointRadius, 0, 2 * Math.PI);
        ctx.fill();
    }
    
    drawPoint(Dx, Dy);
    drawPoint(Fx, Fy);
    drawPoint(Ex, Ey);
    drawPoint(Gx, Gy);
    drawPoint(Px, Py);
    drawPoint(earthX, cy);

    // 4. Labels
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    ctx.fillText('D', Dx - 18, Dy);
    ctx.fillText('F', Fx + 18, Fy);
    ctx.fillText('E', Ex, Ey - 18);
    ctx.fillText('G', Gx, Gy + 18);
    ctx.fillText('P', Px - 12, Py - 12);

    ctx.font = '22px "SimSun", "Songti SC"';
    ctx.fillText('地球', earthX, cy + 30);

    // 5. Dimension Lines (A, B, C)
    ctx.lineWidth = 1;
    ctx.font = 'italic 24px "Times New Roman"';

    // Dimension A (as a standard dimension line below the axis)
    const yA = cy + 60;
    ctx.beginPath();
    ctx.moveTo(Dx, cy); ctx.lineTo(Dx, yA); // Left tick from axis
    ctx.moveTo(cx, cy); ctx.lineTo(cx, yA); // Right tick from axis
    ctx.moveTo(Dx, yA); ctx.lineTo(cx, yA); // Horizontal line
    ctx.moveTo(Dx + headlen, yA - 4); ctx.lineTo(Dx, yA); ctx.lineTo(Dx + headlen, yA + 4); // Left arrow
    ctx.moveTo(cx - headlen, yA - 4); ctx.lineTo(cx, yA); ctx.lineTo(cx - headlen, yA + 4); // Right arrow
    ctx.stroke();
    ctx.fillText('A', (Dx + cx) / 2, yA - 20);

    // Dimension B (reproducing the style from the image)
    ctx.beginPath();
    // Vertical arrow from E down to the major axis
    ctx.moveTo(cx, Ey);
    ctx.lineTo(cx, cy);
    ctx.moveTo(cx - 4, cy - headlen);
    ctx.lineTo(cx, cy);
    ctx.lineTo(cx + 4, cy - headlen);
    // Horizontal arrow from center towards the vertical line
    const yB_arrow = cy - b/2;
    ctx.moveTo(cx, yB_arrow);
    ctx.lineTo(cx - 40, yB_arrow);
    ctx.moveTo(cx - 40 + headlen, yB_arrow - 4);
    ctx.lineTo(cx - 40, yB_arrow);
    ctx.lineTo(cx - 40 + headlen, yB_arrow + 4);
    ctx.stroke();
    ctx.textAlign = 'left';
    ctx.fillText('B', cx + 10, yB_arrow);
    ctx.textAlign = 'center';


    // Dimension C (as a double-headed arrow on the major axis)
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(earthX, cy);
    ctx.moveTo(cx + headlen, cy - 4);
    ctx.lineTo(cx, cy);
    ctx.lineTo(cx + headlen, cy + 4);
    ctx.moveTo(earthX - headlen, cy - 4);
    ctx.lineTo(earthX, cy);
    ctx.lineTo(earthX - headlen, cy + 4);
    ctx.stroke();
    ctx.fillText('C', (cx + earthX) / 2, cy - 25);

</script>
</body>
</html>